package com.shenzhenai.dn_compose_learn

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.shenzhenai.dn_compose_learn.ui.theme.DN_Compose_LearnTheme

/**
 *
 * 07-列表与状态
 * https://www.bilibili.com/video/BV1ob4y1a7ad?spm_id_from=333.788.player.switch&vd_source=e07cc8cc94eb22bd76722071b03cd199&p=7
 *
 *
 * 08 - 动画
 * https://www.bilibili.com/video/BV1ob4y1a7ad?spm_id_from=333.788.player.switch&vd_source=e07cc8cc94eb22bd76722071b03cd199&p=8
 *
 */
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            DN_Compose_LearnTheme {
                Conversation(SampleData.conversationSample)
            }
        }
    }

    @Composable
    fun MessageCard(msg: SampleData.Message) {
        /**
         * 1.Column 类似 LinearLayout 的垂直布局，用来进行垂直方向的布局
         *
         * 2. Row 类似 LinearLayout 的水平布局，用来进行水平方向的布局
         *
         * 3.Text 类似 TextView，用来显示文案
         *
         * 4.Image 类似 ImageView，用来展示图片
         *
         * 5. Modifier 用来处理样式修饰、手势、点击等
         */
        Row(
            modifier = Modifier
                // 设置内边距
                .padding(all = 8.dp)
                // 设置背景
                .background(MaterialTheme.colorScheme.background)
        ) {
            Image(
                painter = painterResource(R.drawable.profile_picture),
                contentDescription = null,

                modifier = Modifier
                    // 设置图片大小
                    .size(40.dp)
                    // 设置图片为圆形图片
                    .clip(CircleShape)
            )
            Spacer(modifier = Modifier.width(8.dp))

            /**
             * remember 也是一个可组合函数，主要是用来存储可组合函数中的变量，
             * 因为可组合函数发生重绘等情况是会重新执行的，如果没有这个，那么就无法
             * 持久化部分函数，每次函数的变量都是重新初始化的
             */
            var isExpanded by remember {
                mutableStateOf(false)
            }

            /**
             * 使用一个颜色的动画
             */
            val surfaceColor: Color by animateColorAsState(
                targetValue = if (isExpanded) MaterialTheme.colorScheme.primary
                else MaterialTheme.colorScheme.surface
            )

            Column(modifier = Modifier.clickable {
                isExpanded = !isExpanded
            }) {
                Text(
                    text = msg.author,
                    // 设置字体颜色
                    color = MaterialTheme.colorScheme.secondary,
                )
                // 设置两个视图间的间距
                Spacer(modifier = Modifier.height(4.dp))
                /**
                 * Surface 用于修饰表面，就说背景、形状等的装饰
                 */
                Surface(
                    color = surfaceColor,
                    // 设置圆角的形状
                    shape = MaterialTheme.shapes.medium,
                    // 阴影的大小
                    shadowElevation = 1.dp,
                    modifier = Modifier
                        // 内容大小改变，以动画的形式表现
                        .animateContentSize()
                        .padding(1.dp)
                ) {
                    Text(
                        text = msg.body,
                        modifier = Modifier.padding(all = 4.dp),
                        // 设置字体样式
                        style = MaterialTheme.typography.bodyMedium,
                        // 设置最大行数
                        maxLines = if (isExpanded) Int.MAX_VALUE else 1
                    )
                }
            }
        }

    }

    @Preview
    @Composable
    fun PreviewMessageCard() {
        MessageCard(
            SampleData.Message("Android", "Jetpack Compose")
        )
    }

    @Composable
    fun Conversation(msgList: List<SampleData.Message>) {
        /**
         * 带缓冲的列表，类似 ListView, RecyclerView
         */
        LazyColumn {
            items(msgList) { msg ->
                MessageCard(msg)
            }
        }
    }


    @Preview
    @Composable
    fun PreviewConversation() {
        Conversation(SampleData.conversationSample)
    }


}
